<!-- 形变功能 -->
<template>
    <myMoveBox ref="moveBoxDom" :attr="curAttr" @move="root_MoveEvent" @movebegin="root_MovebeginEvent"
        @moveend="root_MoveendEvent">
        <div class="moveBox-content" ref="contentDom" :style="curAttr.curCss" @click="open_ClickEvent">
            <div class="title" :class="isShow ? 'title-hide' : 'title-show'"
                :style="'background-color:' + curAttr.backcolor + ''">
                <slot name="show">

                </slot>
                <div v-if="isShow" class="title-left">
                    <img class="icon-move" @click="close_ClickEvent" src="@/static/icon/close-w.svg" />
                </div>
            </div>
            <div class="context" @mousedown.stop v-if="isShow">
                <slot name="hide">

                </slot>
            </div>
        </div>
    </myMoveBox>
</template>

<script setup>
import { onMounted, getCurrentInstance, onBeforeUnmount } from 'vue';
import myMoveBox from './index.vue'
import { MoveboxShadow } from './shadow.js'

const props = defineProps({
    attr: {
        type: {},
        default: {},
        require: false,
    }
});

const curAttr = ref({});
const defaultAttr = () => {
    return {
        zIndex: [999, 9999],//图层
        backcolor: '#409eff',//背景颜色
        isClick: true,//默认点击

        curCss: "",//当前rootDom的style
    };
}

const emits = defineEmits(['show']);

const isShow = ref(false);
const contentDom = ref();
const moveBoxDom = ref();
const shadow = MoveboxShadow.getInstance();

onMounted(() => {
    curAttr.value = Object.assign(defaultAttr(), shadow.getAttr(), props.attr);

    const attr = curAttr.value;
    const xywh = shadow.init(getCurrentInstance().exposed);
    attr.posi = [xywh[0], xywh[1]]

    moveBoxDom.value.setAttr(curAttr.value);
    setPosi(xywh, 0);

    //计算初始化位置是否符合
    if (attr.posiResetTime != -1)
        setTimeout(() => {
            attr.posiIndex = shadow.initPosiIndex(attr.id);
            const posi = MoveboxShadow.computePosi(attr.posiIndex);
            moveBoxDom.value.move(posi[0], posi[1], attr.posiResetTime <= 0 ? 0 : 0.3);
        }, attr.posiResetTime);
});

onBeforeUnmount(() => {
    shadow.rem(curAttr.value.id);
});

// #region 核心逻辑
//进行形变
const moveTo = ({
    xy = [],
    wh = [],
    duration = 0.3,
    isLog = true,
}) => {
    const attr = curAttr.value;

    if (isLog) {
        attr.temp = {
            posi: JSON.parse(JSON.stringify(attr.posiIndex)),
            wh: JSON.parse(JSON.stringify(attr.whCount)),
        };
    }
    attr.posiIndex = xy;
    attr.whCount = wh;

    //计算目标位置
    attr.posiIndex = shadow.initPosiIndex(attr.id);
    //计算目标大小
    attr.whCount = shadow._setTransform(attr);

    const curPosi = MoveboxShadow.computePosi(attr.posiIndex);
    const curWh = MoveboxShadow.computeWH(attr.whCount);
    setPosi([...curPosi, ...curWh], duration);
}

const setPosi = ([x, y, w, h], duration = 0.3) => {
    const attr = curAttr.value;
    attr.curCss = `transition-duration:${duration}s;width:${w}px;height:${h}px;`;
    moveBoxDom.value.move(x, y, duration);
}

//默认点击(只有打开的)(需要外部再次进行调用moveTo函数)
const open_ClickEvent = () => {
    const attr = curAttr.value;
    if (attr.isClick && !isShow.value) {
        isShow.value = true;
        emits('show');
    }
}

const close_ClickEvent = () => {
    console.log('emmm')
    reset();
}

//回归原位
const reset = ({
    duration = 0.3,
} = {}) => {
    const attr = curAttr.value;
    const [x, y] = MoveboxShadow.computePosi(attr.posiIndex);
    const [w, h] = MoveboxShadow.computeWH(attr.whCount);;

    attr.curCss = `width:${w}px;height:${h}px;transition-duration:${duration}s;background:${attr.backcolor[isShow.value ? 1 : 0]};`;
    moveBoxDom.value.move(x, y, duration);
}
// #endregion

//#region rootMoveEvent
const root_MovebeginEvent = (data) => {
    shadow.getBoxPosiIndex(curAttr.value.id);
}
const root_MoveEvent = (data) => {
    const attr = curAttr.value;
    shadow.getShadowPosi(data[0], data[1], attr.whCount[0], attr.whCount[1]);
}
const root_MoveendEvent = (data) => {
    const attr = curAttr.value;
    const posiIndex = shadow.clear();
    const xy = MoveboxShadow.computePosi(posiIndex);
    const wh = MoveboxShadow.computeWH(attr.whCount);
    setPosi([...xy, ...wh], 0.3);
}
//#endregion


//#region 输出
const show = (data) => {
    isShow.value = true;
    moveTo(data);
}
const hide = (data) => {
    isShow.value = false;
    reset(data);
}
const getRoot = () => {
    return moveBoxDom.value;
}
const getAttr = () => {
    return curAttr.value;
}
const setIsMove = (data) => {
    moveBoxDom.value.setIsMove(data);
}
//#endregion
defineExpose({
    moveTo, show, hide, setIsMove, getRoot, getAttr,
});
</script>

<style lang="scss" scoped>
.moveBox-content {
    border-radius: 7px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    .context {
        height: calc(100% - 30px);
        width: 100%;
    }

    .title {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        align-items: center;
        transition-duration: 0.3s;

        .title-left {
            height: 100%;
            display: flex;
            align-items: center;

            >img {
                width: 20px;
                height: 20px;
                margin-right: 5px;
            }
        }
    }

    .title-show {
        height: 100%;
        justify-content: center;
    }

    .title-hide {
        height: 30px;
        justify-content: space-between;
    }
}
</style>